<template>
  <div v-title="'售卖车票 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="sell-ticket PublicListStyle">
      <div class="only-by-condition">
        <el-form :inline="true" class="demo-form-inline" ref='searchForm' :model='searchCondition'>
          <el-form-item label="乘车车站" prop='startSiteId'>
            <el-select  placeholder="请选择乘车车站" v-model='searchCondition.startSiteId'
                        @change='loadList(1)'>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item,index) in siteList" :key="index"
                         :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="到达车站" prop='endSiteId'>
            <el-select  placeholder="请选择到达车站" v-model='searchCondition.endSiteId'
                        @change='loadList(1)'>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item,index) in siteList" :key="index"
                         :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期" prop='rideTime'>
            <el-date-picker v-model="searchCondition.rideTime" type="date" :editable="false"
                            :picker-options="pickerOptions" placeholder="选择日期"
                            @change="changeDate"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>

      <div class="gray_bg tabContainer" v-loading="isLoading" element-loading-text="拼命加载中">
        <el-table :data="tableData.elements">
          <el-table-column label="发车时间" prop="rideTime" width="180px">
            <template slot-scope="scope">
              {{ scope.row.rideTime | formatMinutes }}
            </template>
          </el-table-column>
          <el-table-column label="乘车车站" prop="startSite"></el-table-column>
          <el-table-column label="到达车站" prop="endSite"></el-table-column>
          <el-table-column label="说明" prop="des"
                           width="260px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.distance">{{ '约' + scope.row.distance + '公里' }}</span>
              <span v-if="scope.row.distance && scope.row.time">,</span>
              <span v-if="scope.row.time">{{ '约' + scope.row.time + '小时' }}</span>
              <span v-if="(scope.row.distance || scope.row.time) && scope.row.siteType === 'Midway'">,</span>
              <span v-if="scope.row.siteType === 'Midway'">过路车</span>
            </template>
          </el-table-column>
          <el-table-column label="剩余票数" prop="remainTicket"></el-table-column>
          <el-table-column label="票价（元）" prop="price">
            <template slot-scope="scope">
              {{ scope.row.price | currency('', 2) }}
            </template>
          </el-table-column>
          <el-table-column width="90px">
            <template slot-scope="scope">
              <mk-permission :perms="['Ticket:TicketManagement:SellTicket:create']">
                <el-button type="text"
                           v-if="scope.row.remainTicket>0"
                           @click="openSellForm(scope.row)">购票</el-button>
              </mk-permission>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination v-if="parseInt(tableData.totalAmount)>0"
                       :current-page="tableData.page" :page-size="tableData.size"
                       :total="parseInt(tableData.totalAmount)" layout="total, prev, pager, next"
                       @current-change="loadList"></el-pagination>
      </div>
    </div>
    </el-scrollbar>
    <mk-sell-ticket-form :dialog-visible="formDialogVisible"
                         :current-row="currentRow"
                         @submitSuccess="loadList"
                         @closeDialog="formDialogVisible=false"></mk-sell-ticket-form>

  </div>
</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import { mapState } from 'vuex'
  import MkSellTicketForm from './sellTicketForm.vue'
  import ticketService from '../../../services/ticket'
  import MkPermission from "../../../components/MkPermission"

  export default {
    name: 'MkSellTicket',

    components: {
      MkBreadcrumb, MkSellTicketForm, MkPermission
    },

    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      siteList: state => state.route.siteList
    }),

    methods: {
      loadList (pageValue) {
        let hasCondition = false;
        for (let item in this.searchCondition) {
          if (this.searchCondition[item] && item !== 't' && item !== 'page.size' && item !== 'page.pn') {
            hasCondition = true;
          }
        }
        if (hasCondition) {
          this.isLoading = true;
          if (pageValue) {
            this.searchCondition['page.pn'] = pageValue;
          }
          ticketService.loadTicketListServer (this.searchCondition, data => {
            this.tableData = data.data;
            this.isLoading = false;
          });
        } else {
          this.isLoading = false;
          this.tableData = {
            page: '',
            size: '',
            totalAmount: '',
            totalPages: '',
            elements: []
          };
        }
      },

      openSellForm (row) {
        this.currentRow = row;
        this.formDialogVisible = true;
      },

      changeDate () {
        if (this.searchCondition.rideTime) {
          this.searchCondition.rideTime = new Date(this.searchCondition.rideTime).pattern('yyyy-MM-dd');
        } else {
          this.searchCondition.rideTime = '';
        }
        this.loadList(1);
      }
    },

    mounted: function() {
      this.$store.dispatch('loadSiteList', {fields: 'id,name'});
    },

    data () {
      return {
        isLoading: false,
        formDialogVisible: false,
        currentRow: {},
        searchCondition: {
          startSiteId: '',
          endSiteId: '',
          rideTime:'',
          'page.pn': 1,
          'page.size': 10
        },
        tableData: {
          page: '',
          size: '',
          totalAmount: '',
          totalPages: '',
          elements: []
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        breadcrumbData: {
          list: {
            first: {name:'票务管理',path: null, isClickAble: false},
            second: {name: '售卖车票',path: null, isClickAble: false},
          },
          menuIconStyle : 'ticketIconStyle'
        }
      }
    },

    filters: {
      formatMinutes (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      }
    }
  }
</script>

<style lang='less'>
  .sell-ticket {
    .only-by-condition {
      margin-bottom: 10px;
      .el-input__inner {
        background-color: #fff;
      }
    }
  }
</style>
